<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="main">
    <div class="news">
        <div class="bgc">
            新闻中心
        </div>
        <div class="title">
            新闻公告
        </div>
        <div class="search">
            <input type="text" name="NewsTitle"> <input type="button" value="查询新闻">
            <input type="text" name="ClubName"> <input type="button" value="按社团查询">
        </div>
        <div class="showNews">
            <div class="newsInfo" v-for="(i, index) in news" :key="index">
                <hr>
                <div class="date">
                    <div class="year">{{ formatDate(i.newsTime).year }}</div>
                    <div class="month">{{ formatDate(i.newsTime).month }}</div>
                    <div class="day">{{ formatDate(i.newsTime).day }}</div>
                </div>
                <div class="newsTitle">
                    <a href="">{{ i.newsTitle }}</a>
                </div>
                <div class="newsClub">
                    <a href="">{{i.club.clubName}}</a>
                </div>
                <hr>
                <div class="newsNr">
                    <a href="">{{ i.newsContent }}</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<style>
    .newsClub>a{
        color: black;
    }
    .newsClub{
        width: 100px;
        float: right;
        margin-top: 30px;
    }
    .newsNr{
        width: 900px;
        height: 80px;
        margin-top: 20px;
        margin-left: 50px;
        float: left;
        overflow: auto;
    }
    .newsNr>a{
        color: #6c757d;
    }
    .newsTitle{
        width: 600px;
        height: 50px;
        line-height: 50px;
        float: left;
        margin-left: 50px;
    }
    .newsTitle>a{
        font-size: 30px;
        font-weight: bold;
        color: black;
    }
    .year{
        height: 40px;
        text-align: right;
        margin-top: 30px;
        font-size: 30px;
        font-weight: bold;
    }
    .month{
        text-align: right;
    }
    .day{
        height: 40px;
        text-align: right;
        font-size: 30px;
        font-weight: bold;
    }
    .date{
        width: 100px;
        height: 150px;
        float: left;
    }
    .newsInfo:after{
        clear:both;
        display:block;
        content:"";
    }
    .main{
        width: 1100px;
        margin: auto;
    }
    .bgc{
        height: 200px;
        text-align: center;
        line-height: 200px;
        font-size: 35px;
        font-weight: bold;
        background-image: url("img/newsImg/R.jpg");
        background-size: 100%;
        color: red;
    }
    .title{
        font-weight: bold;
        font-size: 20px;
        line-height: 40px;
        height: 40px;
    }
</style>
<script>
    $(function (){
        // LoginVerify();
        function LoginVerify(){
            console.log("进行登陆验证");
            $.ajax({
                url:"loginVerify",
                type:"get",
                dataType:"json",
                success:function (response){
                    if(response.state==300){
                        let a = alert(response.message);
                        window.location.href="login.html";
                    }
                }
            })
        }
        let app=new Vue({
            el:".main",
            data:{
                news:[]
            },
            methods:{
                formatDate(newsTime) {
                    const date = new Date(newsTime);
                    return {
                        year: date.getFullYear(),
                        month: date.getMonth() + 1, // 月份从0开始，所以加1
                        day: date.getDate()
                    };
                }
            }
        });
        $.ajax({
            url:"getNews",
            type:"get",
            dataType:"json",
            success:function (resp){
                console.log(resp);
                app.news=resp;
            }
        })
    })
</script>